<template>
  <div class="forgot-password-container">
    <div class="forgot-password-form">
      <div class="form-header">
        <h2>找回密码</h2>
        <p>请输入您的邮箱，我们将发送重置密码链接到您的邮箱</p>
      </div>

      <el-form
        ref="forgotFormRef"
        :model="forgotForm"
        :rules="forgotRules as any"
        class="form-content"
      >
        <el-form-item prop="email">
          <el-input 
            v-model="forgotForm.email" 
            type="email" 
            placeholder="请输入注册邮箱" 
            clearable
            prefix-icon="Message"
          />
        </el-form-item>

        <el-form-item prop="captcha">
          <div class="captcha-container">
            <el-input 
              v-model="forgotForm.captcha" 
              placeholder="请输入验证码" 
              clearable
              prefix-icon="Key"
            />
            <img :src="captchaUrl" alt="验证码" class="captcha-image" @click="refreshCaptcha" />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            :loading="loading"
            @click="handleSubmit"
            class="submit-button"
          >
            发送重置邮件
          </el-button>
        </el-form-item>
      </el-form>

      <div class="form-footer">
        <router-link to="/auth/login" class="back-link">
          <el-icon><ArrowLeft /></el-icon>
          返回登录
        </router-link>
      </div>

      <!-- 邮件发送成功提示 -->
      <el-dialog
        v-model="successDialogVisible"
        title="邮件已发送"
        width="400px"
        :close-on-click-modal="false"
      >
        <div class="success-content">
          <el-icon class="success-icon"><CircleCheck /></el-icon>
          <p>重置密码邮件已发送到您的邮箱</p>
          <p class="email-address">{{ forgotForm.email }}</p>
          <p class="tip">请检查您的邮箱，并按照邮件中的指引重置密码</p>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="successDialogVisible = false">知道了</el-button>
            <el-button type="primary" @click="handleBackToLogin"> 返回登录 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userService } from '@/api'
import { ArrowLeft, CircleCheck } from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const forgotFormRef = ref()
const loading = ref(false)
const successDialogVisible = ref(false)
const captchaUrl = ref('')

const forgotForm = reactive({
  email: '',
  captcha: '',
})

const forgotRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 6, message: '验证码长度为4-6位', trigger: 'blur' },
  ],
}

// 方法
const refreshCaptcha = () => {
  // 生成随机验证码URL
  captchaUrl.value = `/api/auth/captcha?timestamp=${Date.now()}&random=${Math.random()}`
}

const handleSubmit = async () => {
  if (!forgotFormRef.value) return

  try {
    await forgotFormRef.value.validate()
    loading.value = true

    const response = await userService.getUserDetail(1) // 临时使用getUserDetail，实际应该调用forgotPassword

    if (response.data.success) {
      successDialogVisible.value = true
    } else {
      ElMessage.error(response.data.error || '发送失败')
      refreshCaptcha()
    }
  } catch (error: any) {
    console.error('Forgot password failed:', error)
    ElMessage.error(error.message || '发送失败')
  } finally {
    loading.value = false
  }
}

const handleBackToLogin = () => {
  successDialogVisible.value = false
  router.push('/auth/login')
}

// 初始化
refreshCaptcha()
</script>

<style scoped>
.forgot-password-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
  padding: 20px;
}

.forgot-password-form {
  background: white;
  border-radius: 0;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header h2 {
  font-size: 28px;
  color: #333;
  margin: 0 0 10px 0;
}

.form-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.form-content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.captcha-container {
  display: flex;
  gap: 10px;
}

.captcha-container .el-input {
  flex: 1;
}

.captcha-image {
  height: 32px;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid #dcdfe6;
  transition: opacity 0.2s ease;
}

.captcha-image:hover {
  opacity: 0.8;
}

.submit-button {
  width: 100%;
  height: 48px;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
  border: none;
}

.form-footer {
  text-align: center;
  margin-top: 20px;
}

.back-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #333;
}

.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 60px;
  color: #52c41a;
  margin-bottom: 20px;
}

.success-content p {
  font-size: 16px;
  color: #333;
  margin: 10px 0;
}

.success-content .email-address {
  font-weight: bold;
  color: #409eff;
}

.success-content .tip {
  font-size: 14px;
  color: #666;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .forgot-password-form {
    padding: 30px 20px;
    margin: 10px;
  }
  
  .form-header h2 {
    font-size: 24px;
  }
  
  .submit-button {
    height: 44px;
    font-size: 1rem;
  }
  
  .el-form-item {
    margin-bottom: 16px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .submit-button {
    transition: all 0.2s ease;
  }
  
  .submit-button:active {
    transform: scale(0.98);
  }
  
  .el-input {
    transition: all 0.2s ease;
  }
  
  .el-input:focus-within {
    transform: scale(1.02);
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .submit-button {
    height: 40px;
    font-size: 0.95rem;
  }
  
  .el-form-item {
    margin-bottom: 14px;
  }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
  .el-form-item {
    margin-bottom: 12px;
  }
  
  .submit-button {
    height: 36px;
    font-size: 0.9rem;
  }
}
</style>
